<template>
  <div class="login">
    <el-row :gutter="60" type="flex" justify="center" align="middle"  style="height: 100vh;">
    <el-col :span="6" :offset="0">
      <el-form
          ref="loginRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <el-form-item class="text-center">
            <el-text class="mx-1" size="large"  style="padding-left: 130px;font-size: 30px;">后台登陆</el-text>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              v-model="loginForm.email"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="账号"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码"
            >
            </el-input>
          </el-form-item>
          <el-checkbox
            v-model="loginForm.rememberMe"
            style="margin: 0px 0px 25px 0px"
            >记住密码</el-checkbox
          >
          <el-form-item style="width: 100%">
            <el-button
              size="large"
              type="primary"
              style="width: 100%"
              @click.prevent="UserLogin"
            >
              <span>登 录</span>
            </el-button>
          </el-form-item>
        </el-form>
    </el-col>
  </el-row>
  </div>
</template>
  
<script setup>
import { ref } from "vue";
import requestUtil from "../utils/request";
import qs from "qs";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "../utils/jsencrypt";
import router from "../router";

const loginForm = ref({
  email: "",
  password: "",
  rememberMe: false,
});

const loginRef = ref(null);

const loginRules = {
  email: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const UserLogin = () => {
  loginRef.value.validate(async (valid) => {
    if (valid) {
      //发送请求
      let result = await requestUtil.post(
        "login" , qs.stringify(loginForm.value)
      );

      // 如果使用 加号拼接时 会参数直接放在 url中  
      //  requestUtil.post("login" + qs.stringify(form.value) )
      // 如果使用 逗号 会参数放入 body中
      //  requestUtil.post("updateUser?",qs.stringify(form.value) );
     
      
      let data = result.data;
      if (data.code == 200) {
        //存入token
        window.sessionStorage.setItem("token", data.token);
        //存入用户信息  将用户对象转化JSON存储
        const { password ,...newUser } =data.user  //解构data.user  移除密码 赋值
        window.sessionStorage.setItem("currentUser",JSON.stringify(newUser));
        window.sessionStorage.setItem("menuList",JSON.stringify(data.menuList) );
        if (loginForm.value.rememberMe) {
          //如果勾选了记住密码 存入cookie
          Cookies.set("email", loginForm.value.email, { expires: 30 });
          Cookies.set("password", encrypt(loginForm.value.password), {
            expires: 30,
          });
          Cookies.set("rememberMe", loginForm.value.rememberMe, {
            expires: 30,
          });
        } else {
          // 如果没勾选记住密码 删除cookie
          Cookies.remove("email");
          Cookies.remove("password");
          Cookies.remove("rememberMe");
        }
        router.replace("/home");
        // ElMessage({
        //   showClose: true,
        //   message: data.info,
        //   type: "success",
        // });
      } else {
        ElMessage({
          showClose: true,
          message: data.info,
          type: "error",
        });
      }
    } else {
      ElMessage({
        showClose: true,
        message: "验证失败",
        type: "error",
      });
    }
  });
};

function getCookie() {
  const email = Cookies.get("email");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    email: email === undefined ? loginForm.value.email : email,
    password:password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe:rememberMe === undefined ? false : Boolean(rememberMe),
  };
}

getCookie();
</script>

<style  scoped>
 .login{
  background: linear-gradient(135deg, #a8e063, #2adad1); 
 }
 .el-text,.el-checkbox{
  color: #333333;
 }
</style>
  